<template>
	<div class="order-detail">
		<div class="detail-header">
			<div class="order-status">{{ getStatusText(order.status) }}</div>
			<div class="order-no">订单号: {{ order.no }}</div>
		</div>

		<!-- 商品信息部分 -->
		<div class="detail-section">
			<div class="section-title">商品信息</div>
			<div v-for="item in order.items" :key="item.id" class="detail-item">
				<u-image :src="item.picUrl" width="80" height="80" radius="4" mode="aspectFill"></u-image>
				<div class="item-detail">
					<div class="item-name">{{ item.spuName }}</div>
					<div class="item-specs">
						<span v-for="(prop, idx) in item.properties" :key="idx"> {{ prop.propertyName }}: {{ prop.valueName }} </span>
					</div>
					<div class="item-price">¥{{ formatAmount(item.payPrice || 0) }} x{{ item.count }}</div>
				</div>
			</div>
		</div>

		<!-- 订单信息部分 -->
		<div class="detail-section">
			<div class="section-title">订单信息</div>
			<div class="info-item">
				<span>订单金额</span>
				<span>¥{{ formatAmount(order.payPrice || 0) }}</span>
			</div>
			<div class="info-item">
				<span>优惠金额</span>
				<span>-¥{{ formatAmount(order.discountPrice || 0) }}</span>
			</div>
			<div class="info-item">
				<span>运费</span>
				<span>¥{{ formatAmount(order.deliveryPrice || 0) }}</span>
			</div>
			<div class="info-item total">
				<span>实付金额</span>
				<span class="total-price">¥{{ formatAmount(order.payPrice || 0) }}</span>
			</div>
		</div>

		<!-- 收货信息部分 -->
		<div class="detail-section">
			<div class="section-title">收货信息</div>
			<div class="info-item">
				<span>收货人</span>
				<span>{{ order.receiverName }} {{ order.receiverMobile }}</span>
			</div>
			<div class="info-item">
				<span>收货地址</span>
				<span>{{ order.receiverAreaName }} {{ order.receiverDetailAddress }}</span>
			</div>
		</div>

		<!-- 物流信息部分 -->
		<!-- <div class="detail-section">
			<div class="section-title">物流信息</div>
			<div v-if="order.logisticsNo" class="info-item">
				<span>物流公司</span>
				<span>{{ order.logisticsName }}</span>
			</div>
			<div v-if="order.logisticsNo" class="info-item">
				<span>物流单号</span>
				<span>{{ order.logisticsNo }}</span>
			</div>
			<div v-else class="no-logistics">暂无物流信息</div>
		</div> -->
		<u-popup :show="deliveryVisible" mode="bottom" round="16">
			<DeliveryForm v-if="order" :order-id="order.id" @submit="handleDeliverySubmit" @cancel="deliveryVisible = false" />
		</u-popup>
		<!-- 订单日志部分 -->
		<!-- <div class="detail-section">
			<div class="section-title">订单日志</div>
			<u-steps direction="column" :list="orderLogs" :current="orderLogs.length - 1">
				<template v-slot:item="{ item }">
					<view class="log-content">
						<view class="log-text">{{ item.content }}</view>
						<view class="log-time">{{ formatTime(item.createTime) }}</view>
					</view>
				</template>
			</u-steps>
		</div> -->

		<!-- 操作按钮 -->
		<div class="action-buttons">
			<u-button type="primary" plain @click="handleBack">返回</u-button>
			<u-button v-if="order.status === 10" type="primary" @click="handleDelivery">发货</u-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import dayjs from 'dayjs';
import DeliveryForm from '../DeliveryForm/DeliveryForm.vue';
import { deliveryOrder } from '@/api/mall/trade/order';
import type { OrderVO, TradeOrderSummaryRespVO, DeliveryVO } from '@/api/mall/trade/order';
import { useOrderStore } from '@/store/modules/order';
let useStore = useOrderStore();
const deliveryVisible = ref(false);

// 订单对象
const order = ref<any>({});
const handleDeliverySubmit = async (data: DeliveryVO) => {
	uni.showToast({
		title: '发货成功',
		icon: 'success',
	});
	deliveryVisible.value = false;
	// 模拟API调用
	await deliveryOrder(data);
	useStore.removeOrder(data.id);
};
onLoad((options) => {
	if (options.orderData) {
		// 解码并解析订单对象
		order.value = JSON.parse(decodeURIComponent(options.orderData));
		console.log('订单详情数据:', order.value);
	}
});

// 格式化金额
const formatAmount = (value: number) => {
	return (value / 100).toFixed(2);
};

// 格式化时间
const formatTime = (date: Date | null) => {
	return date ? dayjs(date).format('YYYY-MM-DD HH:mm') : '--';
};

// 订单状态映射
const ORDER_STATUS = {
	0: { text: '待付款', type: 'warning' },
	10: { text: '待发货', type: 'primary' },
	20: { text: '已发货', type: 'info' },
	30: { text: '已完成', type: 'success' },
	40: { text: '已取消', type: 'error' },
	50: { text: '部分发货', type: 'warning' },
};

// 获取状态文本
const getStatusText = (status: number | null) => {
	if (status === null || status === undefined) return '未知';
	return ORDER_STATUS[status as keyof typeof ORDER_STATUS]?.text || '未知';
};

// 订单日志模拟数据
// const orderLogs = computed(() => {
// 	if (!order.value) return [];
// 	return [
// 		{ content: '订单创建', createTime: order.value.createTime },
// 		{ content: '用户付款成功', createTime: order.value.payTime || new Date(order.value.createTime!.getTime() + 10 * 60 * 1000) },
// 		{ content: '系统已接单，等待发货', createTime: new Date(order.value.createTime!.getTime() + 30 * 60 * 1000) },
// 	];
// });

// 返回上一页
const handleBack = () => {
	uni.navigateBack();
};

// 处理发货
const handleDelivery = () => {
	deliveryVisible.value = true;
	// 发货操作，可以根据实际需求进行实现
};
</script>

<style lang="scss" scoped>
.order-detail {
	width: 90vw;
	max-width: 600px;
	padding: 24px;
	background: #fff;
	border-radius: 16px;
	background: linear-gradient(135deg, #fff9c4 0%, #ffffff 100%);

	.detail-header {
		text-align: center;
		padding-bottom: 16px;
		margin-bottom: 16px;
		border-bottom: 1px solid #f1f1f1;

		.order-status {
			font-size: 18px;
			font-weight: bold;
			color: var(--u-primary);
			margin-bottom: 8px;
		}

		.order-no {
			font-size: 14px;
			color: #909399;
		}
	}

	.detail-section {
		margin-bottom: 24px;

		.section-title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 12px;
			padding-left: 8px;
			border-left: 4px solid var(--u-primary);
		}
	}

	.detail-item {
		display: flex;
		padding: 12px 0;
		border-bottom: 1px solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		.u-image {
			margin-right: 12px;
			flex-shrink: 0;
		}

		.item-detail {
			flex: 1;

			.item-name {
				font-size: 15px;
				font-weight: 500;
				margin-bottom: 6px;
			}

			.item-specs {
				display: flex;
				flex-wrap: wrap;
				gap: 8px;
				font-size: 12px;
				color: #909399;
				margin-bottom: 8px;
			}

			.item-price {
				font-size: 14px;
				font-weight: bold;
				color: #f56c6c;
			}
		}
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		font-size: 14px;
		border-bottom: 1px solid #f5f5f5;

		&.total {
			font-weight: bold;
			margin-top: 8px;
			border-top: 1px dashed #eee;
			border-bottom: none;

			.total-price {
				color: #f56c6c;
				font-size: 16px;
			}
		}
	}

	.no-logistics {
		text-align: center;
		padding: 16px;
		color: #909399;
		font-size: 14px;
	}

	.log-content {
		padding-left: 12px;

		.log-text {
			font-size: 14px;
			margin-bottom: 4px;
		}

		.log-time {
			font-size: 12px;
			color: #909399;
		}
	}

	.action-buttons {
		display: flex;
		gap: 16px;
		margin-top: 24px;

		.u-button {
			flex: 1;
		}
	}
}
</style>
